<template>
  <!-- 标题 -->
  <p class="title">{{ pageData.title }}</p>

  <!-- 表格 -->
  <Table ref="tableRef" :search="search" :tools="tools" :columns="columns" :api="getThingType" />


  <!-- 增加模态框 -->
  <n-modal v-model:show="pageData.isShowAddModel" :mask-closable="false" preset="dialog" title="增加" positive-text="确定"
    negative-text="取消" style="width: 600px" @positive-click="add" @negative-click="addCancel"
    @after-leave="closeAddModel">

    <Form :config="addFormConfig" ref="addFormRef" />
  </n-modal>

  <!-- 修改模态框 -->
  <n-modal v-model:show="pageData.isShowUpdateModel" :mask-closable="false" preset="dialog" title="编辑"
    positive-text="确定" negative-text="取消" style="width: 600px" @positive-click="update" @negative-click="updateCancel"
    @after-leave="closeUpdateModel">
    <Form ref="updateFormRef" :config="updateFormConfig" />
  </n-modal>

</template>

<script setup lang="ts">
import { getThingType, updateThingType, addThingType, removeThingType } from '@/api/thing/thingType';
import { NButton, NSpace } from 'naive-ui';
import { h, reactive, ref } from 'vue';
import { filterData, addFormConfig, updateFormConfig } from './config'
import { useRoute } from 'vue-router'
import { deepClone } from '@/utils/lib/clone';


const addFormRef = ref()
const updateFormRef = ref()
const tableRef = ref()


const route = useRoute()

const closeUpdateModel = () => {
  pageData.isShowUpdateModel = false
}

const closeAddModel = () => {
  pageData.isShowAddModel = false
}

/**
 * 增加类别
 */
const add = async () => {
  try {
    const instance = addFormRef.value.getFormRef()
    console.log(instance.model);
    instance.validate(async (err) => {
      if (!err) {
        await addThingType({
          TYPE: instance.model.TYPE
        })
        tableRef.value.getData()
      } else {
        window['$message'].error("增加类别失败");
      }
    })

  } catch (error) {
    return Promise.reject(error)
  }
}

/**
 * 更新类别
 */
const update = async () => {
  try {
    const instance = updateFormRef.value.getFormRef()
    console.log(instance.model);
    instance.validate(async (err) => {
      if (!err) {
        await updateThingType({
          id: instance.model.id,
          TYPE: instance.model.TYPE
        })
        tableRef.value.getData()
      } else {
        window['$message'].error("更新类别失败");
      }
    })

  } catch (error) {
    return Promise.reject(error)
  }
}

/**
 * 取消
 */
const addCancel = () => {
  pageData.isShowAddModel = false
}

const updateCancel = () => {
  pageData.isShowUpdateModel = false
}

const addType = (val) => {
  console.log('add', val);
  pageData.isShowAddModel = true

}

const editType = (row) => {
  console.log('edit', row);
  pageData.selectedRow = deepClone(row)
  updateFormConfig.formItems[0].value = row.id
  updateFormConfig.formItems[1].value = row.TYPE
  pageData.isShowUpdateModel = true
}

/**
 * 删除类别
 */
const deleteType = async (row) => {
  try {
    console.log('delete', row);
    window['$dialog'].success({
      title: '删除',
      content: '是否删除该条数据？',
      maskClosable: false,
      negativeText: '取消',
      positiveText: '确定',
      onPositiveClick: async () => {
        await removeThingType({
          id: row.id
        })
        tableRef.value.getData()
      }
    })
  } catch (error) {
    return Promise.reject(error)
  }
}

/**
 * 搜索栏
 */
const search = []

/**
 * 工具栏按钮
 */
const tools = [
  {
    name: '新增类别',
    type: 'error',
    handleClick: addType
  }
]

/**
 * 表格
 */
const columns = [
  {
    title: '类别',
    key: 'TYPE',
    width: 500
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, null, [
        h(NButton, {
          type: 'info',
          size: 'small',
          onClick: () => editType(row)
        }, () => '编辑'),
        h(NButton, {
          type: 'error',
          size: 'small',
          onClick: () => deleteType(row)
        }, () => '删除')
      ])
    }
  }
]


const pageData = reactive({
  selectedRow: {} as any,
  isShowAddModel: false as boolean,
  isShowUpdateModel: false as boolean,
  title: route.meta.title as string,
})



</script>

<style scoped lang="less">
.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
</style>